<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./fonts/icomoon.css" />
  <style>
    .jinsewangke {
      position: relative;
      top: -30px;
    }

    .jinsewangkes {
      position: relative;
      top: -40px;
    }

    .jinsewangkess {
      position: relative;
      top: -120px;
    }
  </style>
  <script src="./js/echarts.min.js"></script>

  <!-- <script src="./js/jquery.min.js"></script> -->

  <script src="./js/myrem.js"></script>

  <script src="./js/china.js"></script>

  <script src="./js/date.js"></script>
  <script src="./js/townList.js"></script>


  <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

  <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
  <script src="./js/jquery.min.js"></script>

  <!-- 饼图 -->
  <script src="./js/pie.js"></script>
  <!-- 监控视频 -->
  <script src="monitoringVideo/ezuikit.js"></script>

  <!-- 充电占比 -->
  <script src="./js/rechargeAnswer.js"></script>

  <!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=z08ArBHGfGhiC5UOiqkKfLCPMOizVGBO"></script> -->

  <!-- 高德地图  引入js的api-->
  <script type="text/javascript">
    window._AMapSecurityConfig = {//您的代理服务器域名或地址
      securityJsCode: '914e24ef9e184ba47f15fcc4a5dd39e9',//高德地图密钥
    }
  </script>
  <script
    src="https://webapi.amap.com/maps?v=1.4.8&key=28c8e7abcbf39798c42548038e097819&plugin=AMap.MouseTool&plugin=AMap.Geocoder"></script>

  <!-- 百度地图 -->
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PU924Omqzi2NhOClcTdNfd0HWOBPPQ1d"></script>

  <style>
    /* leaflet地图的样式 */
    /* .tabActive {
            background-color: #2543cad5;
            color: #fac328;
          } */
    .anchorBL {
      /* 隐藏地图下面的文字 */
      display: none;
    }

    #indexMap {
      height: 1000px;
      width: 1000px;
    }

    .leaflet-control-attribution {
      display: none !important;
    }

    .my_tooltip {
      color: #fff;
      background: transparent;
      border: none;
      font-size: 18px;
      box-shadow: none;
    }

    .my_tooltip::before {
      display: none;
    }

    #btn {
      position: absolute;
      top: 0;
      right: 0.83rem;
      z-index: 999;
    }

    #PositionBtn {
      position: absolute;
      top: 30px;
      right: 0.83rem;
      z-index: 999;
    }

    #mySelect {
      position: absolute;
      top: 60px;
      right: 0.83rem;
      z-index: 999;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="layout">
    <div class="cloumn">
      <!-- 区设备统计情况 -->
      <div id="first_level" class="townBaseinfo borderimage">
        <div class="title">区设备统计情况</div>
        <ul class="content">
          <li>
            <div>地址</div>
            <div>充电柜</div>
            <div>换电柜</div>
            <div>充电桩</div>
          </li>
          <li>
            <div>石碁镇</div>
            <div>0</div>
            <div>0</div>
            <div>2</div>
          </li>
          <li>
            <div>洛浦街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>化龙镇</div>
            <div>1</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>新造镇</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>南村镇</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>大石街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>石壁街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>钟村街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>东环街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>沙头街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>市桥街道</div>
            <div>1</div>
            <div>0</div>
            <div>3</div>
          </li>
          <li>
            <div>大龙街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>沙湾街道</div>
            <div>0</div>
            <div>0</div>
            <div>1</div>
          </li>
          <li>
            <div>桥南街道</div>
            <div>3</div>
            <div>0</div>
            <div>6</div>
          </li>
          <li>
            <div>小谷围街道</div>
            <div>0</div>
            <div>0</div>
            <div>0</div>
          </li>
          <li>
            <div>石楼镇</div>
            <div>0</div>
            <div>0</div>
            <div>13</div>
          </li>
        </ul>
      </div>

      <!-- 点击地图的点出现在左边的   镇-设备运行情况（自己设数据）、设备详情（后台拿）  、 设备故障统计（自己设数据）-->
      <div id="second_level" style="display: none">
        <!-- 第一  镇-设备运行情况-->
        <div class="lFirstBox borderimage">
          <div class="title">镇-设备运行情况</div>
          <ul class="">
            <li class="">
              <div>充电柜:</div>
              <div>在线<span class="chargingOnline">1</span></div>
              <div>离线 <span class="chargingNoline">3</span></div>
            </li>
            <li class="">
              <div>换电柜:</div>
              <div>在线<span class="chargeOnline">0</span></div>
              <div>离线 <span class="chargeNoline">1</span></div>
            </li>
            <li class="">
              <div>充电桩:</div>
              <div>在线<span>1</span></div>
              <div>离线 <span>24</span></div>
            </li>
          </ul>
        </div>
        <!-- 第二 设备详情-->
        <div class="lSecondBox borderimage">
          <div class="faultInfo" id="faultInfo">
            <div class="title">设备详情</div>
            <div class="content"></div>
          </div>
        </div>
        <!-- 第三 -->
        <div class="lthirdlyBox borderimage">
          <!-- 设备故障统计 -->
          <div class="faultStat" id="faultStat">
            <div class="title">设备故障统计</div>
            <div class="content">
              <div class="data">
                <div class="left">
                  <div class="bigBox">
                    <div class="box1">
                      <div>充电桩故障</div>
                      <div>0</div>
                    </div>
                    <div class="box2">
                      <div>充电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box3">
                      <div>换电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box4">
                      <div>监控--设备</div>
                      <div>0</div>
                    </div>
                  </div>
                </div>
                <div class="center">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
                <div class="right">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
              </div>
              <div class="state">
                <div class="left">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已完成</div>
                </div>
                <div class="center">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">未处理</div>
                </div>
                <div class="right">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已处理</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 假数据 -->
      <div id="second_level1" style="display: none">
        <!-- 第一  镇-设备运行情况-->
        <div class="lFirstBox borderimage">
          <div class="title">镇-设备运行情况</div>
          <ul class="">
            <li class="">
              <div>充电柜:</div>
              <div>在线<span class="chargingOnline">1</span></div>
              <div>离线 <span class="chargingNoline">3</span></div>
            </li>
            <li class="">
              <div>换电柜:</div>
              <div>在线<span class="chargeOnline">0</span></div>
              <div>离线 <span class="chargeNoline">1</span></div>
            </li>
            <li class="">
              <div>充电桩:</div>
              <div>在线<span>25</span></div>
              <div>离线 <span>0</span></div>
            </li>
          </ul>
        </div>
        <!-- 第二 设备详情-->
        <div class="lSecondBox borderimage">
          <div class="faultInfo" id="faultInfo">
            <div class="title">设备详情</div>
            <div class="content">
              <p>设备名称: <span>展厅测试换电柜</span></p>
              <p>设备地址: <span>番禺实验中学</span></p>
              <p>设备状态: <span>离线</span></p>
              <p>设备类型: <span>换电柜</span></p>
              <p>使用时间: <span> 213天17小时56分钟</span></p>
              <p>空仓: <span>1</span></p>
              <p>充电中: <span>2</span></p>
              <p>未关门: <span>0</span></p>
              <p>满电: <span>0</span></p>
              <p>故障仓: <span>9</span></p>
              <p>总订单: <span>5</span></p>
              <p>收费标准: <span>充电柜1元3小时, 换电柜月租299</span></p>
            </div>
          </div>
        </div>
        <!-- 第三 -->
        <div class="lthirdlyBox borderimage">
          <!-- 设备故障统计 -->
          <div class="faultStat" id="faultStat">
            <div class="title">设备故障统计</div>
            <div class="content">
              <div class="data">
                <div class="left">
                  <div class="bigBox">
                    <div class="box1">
                      <div>充电桩故障</div>
                      <div>0</div>
                    </div>
                    <div class="box2">
                      <div>充电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box3">
                      <div>换电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box4">
                      <div>监控--设备</div>
                      <div>0</div>
                    </div>
                  </div>
                </div>
                <div class="center">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
                <div class="right">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
              </div>
              <div class="state">
                <div class="left">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已完成</div>
                </div>
                <div class="center">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">未处理</div>
                </div>
                <div class="right">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已处理</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 中间分布图 -->
    <div class="cen cloumn" style="position: relative">
      <div class="cenTitle">
        <div></div>
        <span id="cenTitleText">番禺区充电站分布图</span>
        <div></div>
      </div>
      <ul>
        <li>
          <div>换电柜总数</div>
          <span class="tradeCabinetTotalNum">0</span>
        </li>
        <li>
          <!-- 通过fullCabinetTotal赋值 -->
          <div>充电柜总数</div>
          <span class="fullCabinetTotalNum">0</span>
        </li>
        <li>
          <div>充电桩总数</div>
          <span>25</span>
        </li>
      </ul>



      <!-- 第二层 街道分布图 -->

      <div id="secondBox">
        <div id="indexMap" style="width: 100%; height: 32.33rem;position: relative;">
          <button id="btn">返回</button>
          <button id="PositionBtn">获取当前位置</button>
          <select id="mySelect" style="display: none;"></select>
        </div>

      </div>
    </div>

    <!-- 右边 -->
    <div class="cloumn" style="position: relative">
      <!-- 时间显示  从public/js/date.js文件拿showtime函数，在showtime函数定于id为time，这边使用定义一下id为time就可以-->
      <div id="time" style="
            position: absolute;
            right: 3.02rem;
            top: -1.82rem;
            font-size: 1rem;
          "></div>
      <!--右边第一盒子 报警信息 -->
      <div class="alarmInfo borderimage">
        <div class="title">报警信息</div>
        <ul class="list">
        </ul>
      </div>

      <!-- 右边第二盒子 视频监控、充电占比  -->
      <div class="rSecondBox borderimage">
        <div id="monitoringCount" style="display: none">
          <div class="title">监控设备数量</div>
          <div class="content">
            <div>在线<span class="onlineCount">1</span></div>
            <div>离线<span class="nolineCount">0</span></div>
          </div>
        </div>

        <div id="monitoring" class="" style="display: none;">
          <div class="title">视频监控</div>
          <div class="content" style="position: relative;display: flex; flex-wrap: wrap;">
            <!-- 监控视频 // 19.83rem 12.92rem -->
            <div id="playWind" style="max-width: 19.83rem; max-height:12.92rem;"></div>
          </div>
        </div>

        <div id="rechargeAnswer" class="rechargeAnswer">
          <div class="title">充电占比</div>
          <div class="content">
            <div id="answerPicture"></div>
            <div class="answerBox">
              <div class="pile" style="width: 0%" id="pileBgc">
                <div></div>
                <span></span>
              </div>
              <div class="tank" style="width: 0%" id="tankBgc">
                <div></div>
                <span></span>
              </div>
              <div class="electric" style="width: 0%" id="electricBgc">
                <div></div>
                <span></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--  -->
    </div>
  </div>
</body>

<script type="text/javascript">

  // console.log("window.sessionStorage.getItem('remark')--", window.sessionStorage.getItem('remark'))
  let remark = window.sessionStorage.getItem('remark')
  if (remark == 1) {   // 中国电信
    document.querySelector('.layout').style = "background-image: url('./images/logo2.png');"
  } else if (remark == 2) {  // 格林赛福
    document.querySelector('.layout').style = "background-image: url('./images/logo3.png');"
  } else if (remark == 3) {
    document.querySelector('.layout').style = "background-image: url('./images/logo4.png');"
  }

  let townListData = [
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 1石基镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 2洛浦街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 3化龙镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 4南村镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 5新造镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 6大石街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 7钟村街道 
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 8石壁街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 9东环街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 10沙头街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 11桥南街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 12小谷围街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 13大龙街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 14石楼镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 15市桥街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 16沙湾街道
  ]

  var markerList = []
  var charge = 0 // 换电柜
  var charging = 0 // 充电柜
  var piles = 0 // 充电桩
  var tempRecordAddress = '' // 点击marker避免重复发请求
  var curMarkerSn = ''
  showtime() // 显示时间
  //  获取设备信息
  let domainNameurl = window.parent.VUE_APP_URL
  $.ajax({
    type: 'POST',
    url: domainNameurl + '/web/device/getDeviceListInfo',
    data: JSON.stringify({}),
    dataType: 'json',
    headers: {
      token: window.sessionStorage.getItem('token'),
      Authorization: window.sessionStorage.getItem('token')
    },
    contentType: 'application/json;charset=utf-8', // 这个参数也是header参数
    success: (res) => {
      //   let latArr = [Number(obj.latlng[1]), Number(obj.latlng[0])]
      // var marker = L.marker(latArr, { draggable: true }).addTo(map)
      // marker.bindTooltip(obj.name).openTooltip()
      // map.setView(latArr, 15)

      // console.log('获取设备信息--', res)

      if (res.code == 200) {

        var list = res.data
        // 删除钟村的数据
        for (var i = 0; i < list.length; i++) {
          if (list[i].id == "1000001749482160"
            || list[i].id == "1000000056545546"
            || list[i].id == "1000000447843649"
            || list[i].id == "1000002079261079") {
            list.splice(i, 1)
            i--
          }
        }
        // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别



        var tradeCabinetList = [] // 换电柜
        var fullCabinetList = [] // 充电柜

        var tradeCabinetTotal = 0
        var fullCabinetTotal = 0
        for (var i = 0; i < list.length; i++) {
          let item = list[i]
          // ----------
          // let lnglatXY = [Number(list[i].lng), Number(list[i].lat)]
          // var geocoder = new AMap.Geocoder({
          //   city: "广州", //城市设为北京，默认：“全国”
          //   radius: 1000 //范围，默认：500
          // });
          // geocoder.getAddress(lnglatXY, (status, result) => {
          //   console.log("result----", result);
          //   if (status === 'complete' && result.info === 'OK') {
          //     item['myTownship'] = result.regeocode.addressComponent.township
          //   } else {
          //     item['myTownship'] = "暂无设备位置";
          //   }
          // });
          // -----------
          // var new_point = new BMap.Point(Number(list[i].lng), Number(list[i].lat))
          // var mk = new BMap.Marker(new_point)
          // // 经纬度
          // var geoc = new BMap.Geocoder()
          // geoc.getLocation(new_point, (rs) => {
          //   console.log("rs-------", rs);
          //   var addComp = rs.addressComponents
          //   // 地址名称
          //   var currentAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
          // })

          // ------
          if (list[i].deviceType == 1) {
            tradeCabinetList.push(list[i]) // 换电柜
            tradeCabinetTotal += 1
          } else if (list[i].deviceType == 3) {
            fullCabinetList.push(list[i]) // 充电柜
            fullCabinetTotal += 1
          }
        }
        $('.fullCabinetTotalNum').html(fullCabinetTotal) //赋值给中间图的充电柜总数
        $('.tradeCabinetTotalNum').html(tradeCabinetTotal)//赋值给中间图的换电柜总数

        // console.log('fullCabinetList', fullCabinetList)
        // console.log('tradeCabinetList--', tradeCabinetList)
        // 换电柜
        for (var i = 0; i < tradeCabinetList.length; i++) {
          for (var j = 0; j < tradeCabinetList[i].deviceInfoDTO.engaged.length; j++) {
            if (
              tradeCabinetList[i].deviceInfoDTO.engaged[j].status == 1 ||
              tradeCabinetList[i].deviceInfoDTO.engaged[j].status == 2
            ) {
              charge += 1
            }
          }
        }
        // 充电柜
        for (var i = 0; i < fullCabinetList.length; i++) {
          for (var j = 0; j < fullCabinetList[i].deviceInfoDTO.engaged.length; j++) {
            if (
              fullCabinetList[i].deviceInfoDTO.engaged[j].status == 1 ||
              fullCabinetList[i].deviceInfoDTO.engaged[j].status == 2
            ) {
              charging += 1
            }
          }
        }

        // console.log('charging--', charging)
        // console.log('charge--', charge)
        // 渲染镇设备运行情况开始
        var chargeList = [] // 换电柜
        var chargingList = [] // 充电柜
        var pilesList = [] // 充电桩
        for (let i = 0; i < list.length; i++) {
          if (list[i].deviceType == 1) {
            // 换电柜
            chargeList.push(list[i])
          } else if (list[i].deviceType == 3) {
            // 充电柜
            chargingList.push(list[i])
          }
        }
        // 充电柜
        var chargingOnline = 0
        var chargingNoline = 0
        // console.log('chargingList---', chargingList)
        for (let i = 0; i < chargingList.length; i++) {
          if (chargingList[i].deviceStatus == 1) {
            chargingOnline += 1
          } else if (chargingList[i].deviceStatus == 2) {
            chargingNoline += 1
          }
        }
        $('.chargingOnline').html(chargingOnline || 0)
        $('.chargingNoline').html(chargingNoline || 0)

        // 换电柜
        var chargeOnline = 0
        var chargeNoline = 0
        var cell = 0 // 充电中
        var suffused = 0 // 电池充满
        var abnormal = 0 // 故障仓
        var notClose = 0 // 未关门
        var noBattery = 0 // 没电池

        var marker = ''
        var dataStr = ''
        // console.log('chargeList---', chargeList)
        for (let i = 0; i < chargeList.length; i++) {
          if (chargeList[i].deviceStatus == 1) {
            chargeOnline += 1
          } else if (chargeList[i].deviceStatus == 2) {
            chargeNoline += 1
          }
        }
        $('.chargeOnline').html(chargeOnline || 0)
        $('.chargeNoline').html(chargeNoline || 0)
        // 渲染镇设备运行情况结束


        let jingweiObj1 = {
          lat: 23.012234, lng: 113.46891, address: '悦堡地产', deviceType: 1,
        }
        let jingweiObj2 = {
          lat: 22.95416, lng: 113.35791, address: '消防救援大队', deviceType: 1,
        }
        let jingweiObj3 = {
          lat: 22.94475, lng: 113.35665, address: '番禺实验中学', deviceType: 2,
        }
        let jingweiObj4 = {
          lat: 22.9550245835481, lng: 113.45658454154967, address: '官涌村幼儿园', deviceType: 2,
        }
        let jingweiObj5 = {
          lat: 22.92707, lng: 113.37182, address: '桥南街道办事处', deviceType: 2,
        }
        let jingweiObj6 = {
          lat: 22.89669, lng: 113.3335, address: '沙湾街西村村民委员会', deviceType: 1,
        }
        let jingweiObj7 = {
          lat: 22.947850104417807, lng: 113.49194737371062, address: '石楼亚运城天峯1区', deviceType: 2,
        }
        let jingweiObj8 = {
          lat: 22.948344091374512, lng: 113.49228533204649, address: '石楼亚运城天峯2区', deviceType: 5,
        }
        let jingweiObj9 = {
          lat: 22.945073864179562, lng: 113.49236579831694, address: '石楼亚运城天峯3区(正门)', deviceType: 4,
        }
        let jingweiObj10 = {
          lat: 22.944975064545286, lng: 113.4945008366928, address: '石楼亚运城天峯3区(东门)', deviceType: 2,
        }

        list.push(jingweiObj1, jingweiObj2, jingweiObj3, jingweiObj4, jingweiObj5, jingweiObj6, jingweiObj7, jingweiObj8, jingweiObj9, jingweiObj10)

        console.log(list);

        for (var i = 0; i < list.length; i++) {

          // console.log('list[i].lat---', list[i].lat) 
          // console.log('list[i].lng---', list[i].lng)
          // 拿到经纬度
          let latArr = [Number(list[i].lat), Number(list[i].lng)]
          // BM.Marker用于在地图上显示可点击/可拖动的图标。L 等于 BM

          var mymarker = L.marker(latArr, {
            icon: L.icon({ iconUrl: './images/mapIcon.png', iconSize: [25, 40] })
          }, { draggable: false }, { riseOnHover: true }).addTo(map)

          // 地图上设备的提示文本 bindTooltip 广州市番禺区港派产业园
          // 增加if判断，优化重叠
          if (list[i].address == '广州市番禺区万科金色城品') {
            mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
              direction: 'bottom',
              permanent: true
            }).openTooltip()
          }
          else if (list[i].address == '广州市番禺区万科金色城品(德贤路)-公交车站') {
            mymarker.bindTooltip('万科金色城品(德贤路)-公交车站' + ':' + list[i].deviceType + '台设备', {
              direction: 'top',
              permanent: true,
              className: 'jinsewangke'

            }).openTooltip()
          }
          else if (list[i].address == '港派') {
            mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
              direction: 'top',
              permanent: true,
              className: 'jinsewangkes'
            }).openTooltip()
          }
          // else if (list[i].address == '佛山市南海区周日电商园') {
          //   mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
          //     direction: 'rigth',
          //     permanent: true,
          //     // className: 'jinsewangkess'

          //   }).openTooltip()
          // }

          else {
            mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
              direction: 'top',
              permanent: true
            }).openTooltip()
          }

          mymarker.myObj = {
            itemObj: list[i]
          }

          var flag = '' // 避免重复发请求
          // 点击地图上的点，触发的事件
          mymarker.on('click', function (e) {
            console.log(22222222222222);
            let shujiyuan = e.target.myObj.itemObj
            console.log(shujiyuan);
            // if (shujiyuan.address = '万科金色城品') {
            //   console.log(list);
            //   mymarker.bindTooltip(shujiyuan.address + ':' + shujiyuan.deviceType + '台设备', {
            //     direction: 'left',
            //     permanent: true,
            //   }).openTooltip()
            // }


            curMarkerSn = e.target.myObj.itemObj.sn
            setTimeout(() => {
              tempRecordAddress = e.target.myObj.itemObj.address
            }, 10)

            if (tempRecordAddress === e.target.myObj.itemObj.address) {
              return false
            }


            else if (e.target.myObj.itemObj.address == '广东省广州市番禺区沙湾街道') { //广东省广州市番禺区沙湾街道  广州市番禺区官涌幼儿园
              document.getElementById('rechargeAnswer').style.display = 'none'//让充电占比隐藏
              document.getElementById('monitoringCount').style.display = 'none'//让视频监控数量隐藏

              document.getElementById('monitoring').style.display = 'block'//让视频监控显示
              // 开启监控视频
              new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,//自动播放
                url: 'ezopen://open.ys7.com/J28314721/1.hd.live',
                accessToken: 'at.016irch50h47pmuk7hen6d5m77z95ule-1e7qfmmfw7-0vgub32-8cfekszbe',
                // decoderPath: './',
                decoderPath: '.',
                width: 500,
                height: 300
              })
            }



            else if (e.target.myObj.itemObj.address == '广州市番禺区万科金色城品') {

              document.getElementById('rechargeAnswer').style.display = 'none'
              document.getElementById('monitoringCount').style.display = 'none'

              document.getElementById('monitoring').style.display = 'block'

              // document.getElementById('playWind').style.maxWidth = '9.96rem'
              // document.getElementById('playWind').style.maxHeight = '6.46rem'

              let url = 'ezopen://open.ys7.com/J51954312/1.hd.live'
              let url2 = 'ezopen://open.ys7.com/J51954395/1.hd.live'
              // // 开启监控视频
              let video = {
                id: 'playWind',
                autoplay: true,
                url: `${url},${url2}`,
                accessToken: 'at.a487hfxl79s1ofsc3r8jimu23pp9yc6a-4ck0gfkf2p-0w20tmp-aapkv3cpi',
                // decoderPath: './',
                decoderPath: '.',
                width: 500,
                height: 300,
                splitBasis: 2

              }
              new EZUIKit.EZUIPlayer(video)

            }
            else if (e.target.myObj.itemObj.address !== '广州市番禺区万科金色城品' || e.target.myObj.itemObj.address == '广东省广州市番禺区沙湾街道') {
              document.getElementById('first_level').style.display = 'none'
              document.getElementById('second_level1').style.display = 'block'
            }




            noBattery = 0 // 没电池
            cell = 0 // 充电中
            suffused = 0 // 电池充满
            abnormal = 0 // 故障仓
            notClose = 0 // 未关门
            console.log('点击了marker', e)

            let itemObj = e.target.myObj.itemObj
            let sn = e.target.myObj.itemObj.sn
            let engagedList = e.target.myObj.itemObj.deviceInfoDTO.engaged
            setTimeout(() => {
              flag = sn
            }, 100)
            for (let j = 0; j < engagedList.length; j++) {
              // console.log('engagedList[j].status--', engagedList[j].status)
              if (engagedList[j].status === 0) {
                noBattery += 1
              } else if (engagedList[j].status === 1) {
                cell += 1
              } else if (engagedList[j].status === 2) {
                suffused += 1
              } else if (engagedList[j].status === 3) {
                abnormal += 1
              }
              if (engagedList[j].cabinetStatus === 1) {
                notClose += 1
              }
            }
            // console.log('list[i].address---', list[i].address)
            // 添加设备详情数据
            dataStr = `
                <p>设备名称: <span>${itemObj.deviceName}</span></p>
                <p>设备地址:  <span>${itemObj.address}</span></p>
                <p>设备状态: <span>${itemObj.deviceStatus == 1
                ? '在线'
                : itemObj.deviceStatus == 2
                  ? '离线'
                  : itemObj.deviceStatus == 3
                    ? '设备故障'
                    : '---'
              }</span></p>
                <p>设备类型: <span>${itemObj.deviceType == 1
                ? '换电柜'
                : itemObj.deviceType == 2
                  ? '租车'
                  : itemObj.deviceType == 3
                    ? '充电柜'
                    : '---'
              }</span></p>
                <p>使用时间: <span>${formatSeconds(
                itemObj.deviceInfoDTO.serverTime
              )}</span></p>
                <p>空仓: <span>${noBattery}</span></p>
                <p>充电中: <span>${cell}</span></p>
                <p>未关门: <span>${notClose}</span></p>
                <p>满电: <span>${suffused}</span></p>
                <p>故障仓: <span>${abnormal}</span></p>
                <p>总订单: <span>${itemObj.deviceInfoDTO.totalOrder}</span></p>
                <p>收费标准: <span>充电柜1元3小时, 换电柜月租299</span></p>`
            document.getElementById('first_level').style.display = 'none'
            document.getElementById('second_level').style.display = 'block'
            document.getElementById('second_level1').style.display = 'none'
            document.querySelector('#second_level #faultInfo').style.display = 'block'
            document.querySelector('.lSecondBox .content').style.display = 'block'

            $('.lSecondBox .content').html(dataStr) // 把数据添加到设备详情栏中

            // 打开视频监控时的报警信息栏
            if (sn !== flag) {
              $.ajax({
                type: 'get',
                url: domainNameurl + '/web/alarm/list',
                data: {
                  sn: sn,
                  pageNum: 1,
                  pageSize: 10
                },
                headers: {
                  token: window.sessionStorage.getItem('token'),
                  Authorization: window.sessionStorage.getItem('token')
                },
                dataType: 'json',
                contentType: 'application/json', // 这个参数也是header参数
                // dataType: 'html',
                success: (res) => {
                  console.log('res---', res)
                  if (res.code == 200) {
                    let rowsList = res.rows
                    var str = ''
                    for (var i = 0; i < 4; i++) {
                      str += `
                            <li class="" id="goToAlarmInfo">
                              <span class="icon-dot"></span>
                              <div class="num">
                                ${i + 1}.
                              </div>
                              <div class="lastDiv">
                                <div class="devTime">报警时间: ${rowsList[i].stime}</div>
                                <div class="sn">设备编号: ${rowsList[i].sn}</div>
                                <div class="alarm">报警信息: ${rowsList[i].alarm}</div>
                              </div>
                            </li>
                          `
                    }
                    $('.alarmInfo .list').children().remove()
                    $('.alarmInfo .list').html(str)// 把数据添加到报警信息栏中
                  }
                }
              })
            }
          })
        }

        // for循环结束
        // ------------------------
      }
    }
  })

  // 正常页面的报警信息
  function getAlarmInfo() {

    $.ajax({
      type: 'get',
      url: domainNameurl + '/web/alarm/list',
      data: {
        pageNum: 1,
        pageSize: 10
      },
      headers: {
        token: window.sessionStorage.getItem('token'),
        Authorization: window.sessionStorage.getItem('token')
      },
      dataType: 'json',
      contentType: 'application/json', // 这个参数也是header参数
      // dataType: 'html',
      success: (res) => {
        if (res.code == 200) {
          let list = res.rows
          var str = ''
          for (let i = 0; i < 4; i++) {
            str += `
          <li class="" id="goToAlarmInfo" >
            <span class="icon-dot"></span>
            <div class="num">
              ${i + 1}.
            </div>
            <div class="lastDiv">
              <div class="">报警时间: ${list[i].stime}</div>
              <div>设备编号: ${list[i].sn}</div>
              <div class="">报警信息: ${list[i].alarm}</div>
            </div>
          </li>
         `
          }

          $('.alarmInfo .list').children().remove()
          $('.alarmInfo .list').html(str)
        }
      }
    })
  }

  // 点击报警信息跳转报警信息页面
  getAlarmInfo()
  $(document).on("click", '#goToAlarmInfo', () => {
    if (curMarkerSn) {
      window.parent.$router.push({
        path: `visual-alarmInfo?sn=${curMarkerSn}`
      })
    } else {
      window.parent.$router.push({
        name: `visual-alarmInfo`
      })
    }
  });



</script>


</html>

<script src="./js/initGeoJSON.js"></script>
<script src="./js/getLocation.js"></script>
<!-- 充电占比的动态显示 -->
<script src="./js/chargeRatio.js"></script>